<template>
  <div>
    <!--头部区域开始-->
    <div>

      <!-- 菜单区域开始 -->
      <div style="width:100%; display:flex;">
        <div style="width:200px; display:flex; flex:1; align-items:center; padding-left:10px; background-color:#e5e6e2;">
          <img style="width:40px; height:40px; border-radius:50%; justify-content:flex-start" src="@/assets/imgs/logo.png" alt="logo">
          <span style="font-size:24px; font-weight:bold; margin-left:5px"><a href="/" class="logo-link" style="font-weight: bolder">校园交友平台</a></span>
        </div>
        <el-menu router default-active="/front/fronthome" class="el-menu-demo" mode="horizontal" style="background-color:#e5e6e2; flex:6;">
          <el-menu-item index="/front/fronthome" style="margin:0 40px">论坛首页</el-menu-item>
          <el-menu-item index="/front/frontforum" style="margin:0 40px">论坛空间</el-menu-item>
          <el-menu-item index="/front/ownwritten" style="margin:0 40px">我的贴子</el-menu-item>
          <el-menu-item index="/front/frontcomment" style="margin:0 40px">我的评论</el-menu-item>
          <el-menu-item index="5" style="margin:0 40px; text-align: right;">{{ }}</el-menu-item>
        </el-menu>
        <div style="width:fit-content; display:flex; align-items: center; padding-right: 20px; background-color:#e5e6e2;">
          <el-dropdown>
            <div style="display:flex; align-items: center">
              <el-image v-if="data.user?.avatar" style="width: 30px; height: 30px; margin-right:5px; border-radius: 50%"  :src="data.user?.avatar" alt="manager"/>
              <img v-else style="width: 30px; height: 30px; margin-right:5px; border-radius: 50%" src="@/assets/imgs/manager.jpg" alt="manager">
              <span style="margin-right: 10px">{{ data.user?.name }}</span>
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/front/person')">个人主页</el-dropdown-item>
                <el-dropdown-item>我的关注</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

      </div>
    </div>

  </div>

  <!--数据渲染区域开始-->
  <div style="flex: 1;min-height: calc(100vh - 60px); padding:0; margin: 0; background-color: #e1dddd" >

    <RouterView />
  </div>
  <!--数据渲染区域结束-->
</template>

<script setup>
import router from "@/router/index.js";
import {reactive} from "vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}')
})

const logout = () => {
  localStorage.removeItem("code_user");
  router.push("/login");
}
</script>


<style scoped>
.el-tooltip__trigger{
  outline:none;
}
</style>